<template>
  <div>
    <h3>信息页面</h3>
    {{ obj }}
    
    <p>{{ massage_list }}</p>
    <table style="width:1000px;margin:0 auto">
        <tr>
            <th>编号</th>
            <th>昵称</th>
            <th>性别</th>
            <th>图片</th>
            <th>所属用户id</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,i) in massage_list" :key="i">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.sex }}</td>
            <td>  
                    <img :src="item.title" alt="" width="200px">
               
            
            </td>
            <td>
                {{ item.user }}
            </td>
            <td>
                <router-link :to="({name:'Address',params:{id:item.id}})">
                       <el-button>点击进入收货按钮</el-button>
                </router-link>
                <el-button @click="updateOne(item)">编辑</el-button>
                <el-button @click="del(item.id)">删除</el-button>
                <!-- <el-button :to="({name:'Address',params:{id:item.id}})">点击进入收货按钮</el-button> -->
            </td>
            
               
        </tr>
    </table>
    <h3>修改</h3>
    <div> 昵称<input type="text" v-model="update_list.name">  </div>
    <div> 性别<input type="text" v-model="update_list.sex">  </div>
    <div> 头像<input type="text" v-model="update_list.title">  </div>
    <div> 所属用户id:<input type="text" v-model="update_list.user">  </div>
    <div> <el-button @click="updatelist">修改</el-button>  </div>
    

  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            obj:this.$route.params.id,
            massage_list:[],
            update_list:{},
        }
    },
    mounted(){
        this.getMassage()
    },
    methods:{
        del(i){
            axios.delete('http://127.0.0.1:8000/users/people/'+i+'/')
            .then(resp=>{
                console.log(resp);
                if(resp.data.code == 200){
                    alert('删除成功')
                    this.getMassage()
                }
            })
            .catch(err=>{
                console.log(err);
            })
        },
        updatelist(){
            axios.put('http://127.0.0.1:8000/users/people/'+this.update_list.id+'/',this.update_list)
            .then(resp=>{
                console.log(resp);
                alert('修改数据成功')
                this.getMassage()
            })
            .catch(err=>{
                console.log(err);
            })
        },
        updateOne(item){
            this.update_list={...item}
        },
        getMassage(){
            axios.get('http://127.0.0.1:8000/users/people/'+this.obj+'/')
            .then(resp=>{
                console.log(resp);
                this.massage_list=resp.data

            })
            .catch(err=>{
                console.log(err);
            })
        }
    }
}
</script>

<style>

</style>